import React, { Component } from 'react'
import { Table, Button, Popconfirm, Tooltip, Modal, Input, message } from 'antd';
import NoData from '@/components/NoData';
import AddModel from './components/AddModel';
import Router from 'umi/router';

const { Search } = Input;
const { confirm } = Modal;

class RulesModel extends Component {

    constructor(argus) {
        super(argus);

        this.state = {
            isShowAddModel: false,
        };
    }
    componentDidMount() {

    }
    // 控制弹窗打开
    addModel(isShowAddModel) {
        this.setState({ isShowAddModel})
    }

    onSearch(val) {

    }
    views(id) {
        Router.push(`/rules/viewModel/${id}`)
    }

    render() {
        const { isShowAddModel } = this.state;

        const columns = [
            {
                title: '模型名称',
                dataIndex: 'modelName',
                width: 220,
            },
            {
                title: '模型类型',
                dataIndex: 'modelType',
                width: 100,
                filters: [{ text: '实体识别', value: '1' }, { text: '关系抽取', value: '2' }],
                onFilter: (value, record) => record.modelType.indexOf(value) === 0,
                render: record => {
                    return (
                        record.modelType === '1' ? '实体识别' : '关系抽取'
                    );
                },
            },
            {
                title: '规则数量',
                dataIndex: 'rulesNum',
                sorter: true,
                width: 80,
            },
            {
                title: '添加时间',
                dataIndex: 'createTimeShort',
                sorter: true,
                width: 200
            }, {
                title: '操作',
                width: 120,
                render: record => {
                    return (
                        <a type="link" onClick={this.views.bind(this, record.id)}>查看</a>
                    );
                },
            },
        ];
        const data = [{ "id": 1, 'modelName': '模型1', 'modelType': '1', 'rulesNum': 12, 'createTime': '--' }, { "id": 2, 'modelName': '模型2', 'modelType': '2', 'rulesNum': 7, 'createTime': '--' }]
        return (
            <>
                {data.length ?
                    <div style={{ padding: '24px 0' }}>
                        <div style={{ marginBottom: 16 }}>
                            <Button type="primary" onClick={this.addModel.bind(this, true)} style={{ marginRight: 12 }} >+新增模型</Button>
                            <Search placeholder="模型名称" onSearch={value => this.onSearch(value)} style={{ width: 200 }} />
                        </div>
                        <Table
                            bordered
                            size={'middle'}
                            columns={columns}
                            dataSource={data}
                            rowKey={record => record.id}
                        />
                    </div>
                    : <NoData title={'您还没建立实体抽取模型'} dec={'建立模型，需要至少在数据中心标注过的4篇文档'} btn={'模型'} callBack={this.addModel.bind(this, true)} />
                }
                {isShowAddModel && <AddModel isShowAddModel callBack={this.addModel.bind(this)} />}
            </>
        );
    }
}

export default RulesModel
